<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>通用样式 | FEI-UI-DESIGN</title>
    
    <meta name="generator" content="VitePress v1.0.0-rc.35">
    <link rel="preload stylesheet" href="/fei-ui-design/assets/style.UepqEusw.css" as="style">
    
    <script type="module" src="/fei-ui-design/assets/app.CtN_OfgH.js"></script>
    <link rel="preload" href="/fei-ui-design/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/framework.hV4g2dZ1.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/theme.XkHReBMm.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/guide_common-css.md.uhWWbi3e.lean.js">
    <link rel="icon" href="/fei-ui-design/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
    <meta name="author" content="ymf">
    <meta name="google" content="nositelinkssearchbox">
    <meta hid="description" name="description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:title" content="FEI-UI-DESIGN - Framework for Vuejs">
    <meta name="twitter:card" content="summary_large_image">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div id="app" class="theme-container" data-v-818e4420><!----><div class="sidebar-mask" data-v-818e4420></div><main class="page" data-v-818e4420><header class="header-page"><a class="back-link"><i class="bx bx-left-arrow-alt"></i></a><div class="header__content"><div class="flex-header"><h1 id="header-title">通用样式</h1><ul class="interactive-links"><li title="Package NPM"><a target="_blank" href="https://www.npmjs.com/package/fei-ui-design"><i class="bx bx-package"></i></a></li><li title="View Code Github"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design"><i class="bx bx-code-alt"></i></a></li><li title="Edit Page"><a target="_blank"><i class="bx bx-edit"></i></a></li><li title="Report a Bug"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues/new?title=[通用样式] - Your Bug Name&amp;body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe 通用样式 should do this%0A%0A**Result**%0AThe 通用样式 does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/exmple-bug/1/"><i class="bx bx-bug"></i></a></li></ul></div></div><svg class="header-effect" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)" fill="#fff"></path></svg></header><aside class="sidebar"><div class="content-sidebar"><ul class="sidebar-sub-headers"><!--[--><!--]--></ul></div></aside><!--[--><!--]--><div class="vp-doc content__default"><div style="position:relative;"><div><div class="card"><div class="text"><!--[--><h1 id="通用样式" tabindex="-1">通用样式 <a class="header-anchor" href="#通用样式" aria-label="Permalink to &quot;通用样式&quot;">​</a></h1><p>组件内部导入了部分通用样式，如内外边距，flex等。默认全局样式引入的时候会默认导入，如进行按需加载，部分内容可按需进行导入</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">//</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> main.js</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">//</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> 全部引入</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/index.css&#39;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">//</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> 按需引入</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/base.css&#39;</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/icon.css&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">//</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> 扩展基础样式</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/common/common.css&#39;</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/common/flex.css&#39;</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/common/reset.css&#39;</span></span>
<span class="line"><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">import </span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;fei-ui-design/dist/styles/common/scrollbar.css&#39;</span></span></code></pre></div><h2 id="reset-css" tabindex="-1">reset.css <a class="header-anchor" href="#reset-css" aria-label="Permalink to &quot;reset.css&quot;">​</a></h2><p>基础样式用于初始化默认样式，这里的reset样式已经集成了部分样式变量，更方便使用。使用时直接导入即可。</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">body</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-color-text-primary</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-font-size-default</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-family</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-font-family</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -webkit-font-smoothing</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> antialiased</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -moz-osx-font-smoothing</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> grayscale</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -webkit-tap-highlight-color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> transparent</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">ul</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  list-style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> none</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">ul</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;"> li</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  list-style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> none</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">article</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">aside</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">blockquote</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">body</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">button</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">code</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">dd</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">details</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">dl</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">dt</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">fieldset</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">figcaption</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">figure</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">footer</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">form</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">header</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">hgroup</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">hr</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">input</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">legend</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">li</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">menu</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">nav</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">ol</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">pre</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">section</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">td</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">textarea</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">th</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">ul</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">a</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-color-primary</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  text-decoration</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> none</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">hover {</span></span>
<span class="line"><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">    color: </span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-color-primary-light1</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">    outline</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> none</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">:</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">focus</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">    color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-color-primary-light1</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">    outline</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> none</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">:</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">active</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">    color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-color-primary-active</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h1</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h2</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h3</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h4</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h6</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-color-text-primary</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-weight</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> inherit</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">first-child {</span></span>
<span class="line"><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">    margin-top: </span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;">0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">:</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">last-child</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">    margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h1</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> calc</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">--fei-font-size-default </span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">+</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 6</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h2</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> calc</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">--fei-font-size-default </span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">+</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 4</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h3</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> calc</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">--fei-font-size-default </span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">+</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 2</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h4</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">h6</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> inherit</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">p</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  line-height</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 1.8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">first-child {</span></span>
<span class="line"><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">    margin-top: </span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;">0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">  &amp;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">:</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">last-child</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">    margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">  }</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">sup</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">,</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">sub</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> calc</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">--fei-font-size-default </span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">-</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 1</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">small</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> calc</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">--fei-font-size-default </span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">-</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 2</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">hr</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  border</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  border-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-border-base-light</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span></code></pre></div><h2 id="flex-css" tabindex="-1">flex.css <a class="header-anchor" href="#flex-css" aria-label="Permalink to &quot;flex.css&quot;">​</a></h2><p><a href="https://github.com/lzxb/flex.css" target="_blank" rel="noreferrer">flex.css</a> 兼容样式 ， <code>flex.css</code> 扩展了换行属性<code>wrap</code></p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">[</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">flex</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">~=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&#39;wrap:wrap&#39;</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">]</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -webkit-flex-wrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> wrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -ms-flex-wrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> wrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  flex-wrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> wrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span></code></pre></div><div flex="main:center cross:center" style="height:80px;border:1px solid #1a5cff;margin:20px 0;"><div style="background:#fff;padding:15px;">看看我是不是居中的</div></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">&lt;!--</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  将dist目录下的css文件引入到你的页面中，根据你的需要引入</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  flex.css 使用flex属性匹配</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  data-flex.css 使用data-flex属性匹配（React使用）</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  如果使用了webpack打包，npm安装后，并且配置了ES6编译器的话，</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  flex 属性匹配可以直接使用：</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">    import &#39;flex.css&#39;;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  data-flex 属性匹配可以直接使用(react使用)</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">    import &#39;flex.css/dist/data-flex.css&#39;;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">  --&gt;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">&lt;!--</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex属性匹配，简单的子元素居中例子： </span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;main:center cross:center&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;height: 80px; border:1px solid #1a5cff; margin: 20px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;background: #fff;padding: 15px;&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">看看我是不是居中的</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><p>flex 属性</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span>dir：主轴方向</span></span>
<span class="line"><span>    top：从上到下</span></span>
<span class="line"><span>    right：从右到左</span></span>
<span class="line"><span>    bottom：从下到上</span></span>
<span class="line"><span>    left：从左到右（默认）</span></span>
<span class="line"><span></span></span>
<span class="line"><span>main：主轴对齐方式</span></span>
<span class="line"><span>    right：从右到左</span></span>
<span class="line"><span>    left：从左到右（默认）</span></span>
<span class="line"><span>    justify：两端对齐</span></span>
<span class="line"><span>    center：居中对齐</span></span>
<span class="line"><span></span></span>
<span class="line"><span>cross：交叉轴对齐方式</span></span>
<span class="line"><span>    top：从上到下（默认）</span></span>
<span class="line"><span>    bottom：从上到下</span></span>
<span class="line"><span>    baseline：基线对齐</span></span>
<span class="line"><span>    center：居中对齐</span></span>
<span class="line"><span>    stretch：高度并排铺满</span></span>
<span class="line"><span></span></span>
<span class="line"><span>box：子元素设置</span></span>
<span class="line"><span>    mean：子元素平分空间</span></span>
<span class="line"><span>    first：第一个子元素不要多余空间，其他子元素平分多余空间</span></span>
<span class="line"><span>    last：最后一个子元素不要多余空间，其他子元素平分多余空间</span></span>
<span class="line"><span>    justify：两端第一个元素不要多余空间，其他子元素平分多余空间</span></span>
<span class="line"><span></span></span>
<span class="line"><span>flex-box:</span></span>
<span class="line"><span>  取值范围(0-10)，单独设置子元素多余空间的如何分配，设置为0，则子元素不占用多余的多余空间</span></span>
<span class="line"><span>  多余空间分配 = 当前flex-box值/子元素的flex-box值相加之和</span></span></code></pre></div><h2 id="common-css" tabindex="-1">common.css <a class="header-anchor" href="#common-css" aria-label="Permalink to &quot;common.css&quot;">​</a></h2><p>边框和部分常用样式</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">m24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mt-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mr-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">mb-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">ml-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  margin-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">p24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pt-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-top</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pr-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pb-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-bottom</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-5</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 5</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-10</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 10</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-15</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 15</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-8</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 8</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">pl-24</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  padding-left</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 24</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">t-center</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  text-align</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> center</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">t-right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  text-align</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> right</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">t-ellipsis</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  display</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> inline-block</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  width</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 100</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">%</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  white-space</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> nowrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  overflow</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> hidden</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  text-overflow</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> ellipsis</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-s-12</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 12</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-s-14</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 14</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-s-16</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 16</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-s-18</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 18</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-s-20</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 20</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-s-22</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  font-size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 22</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">px</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-color-blue</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">1a5cff</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-color-red</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">ff4757</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-color-333</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">333333</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-color-666</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">666666</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">f-color-999</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">999999</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">link</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  cursor</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> pointer</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">1a5cff</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">link-red</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  cursor</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> pointer</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> #</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">ff4757</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">.</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">g-relative</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  position</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> relative</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">[</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">border-box</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">]</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -webkit-box-sizing</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> border-box</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  -moz-box-sizing</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> border-box</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  box-sizing</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> border-box</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">[</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">t-ellipsis</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">]</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  display</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> inline-block</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  width</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 100</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">%</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  white-space</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> nowrap</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  overflow</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> hidden</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  text-overflow</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> ellipsis</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">[</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">v-cloak</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">]</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  display</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;"> none</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span></code></pre></div><h2 id="scrollbar-css" tabindex="-1">scrollbar.css <a class="header-anchor" href="#scrollbar-css" aria-label="Permalink to &quot;scrollbar.css&quot;">​</a></h2><p>用于重置默认滚动条的样式，也可以使用内部scrollbar组件</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">::</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">-webkit-scrollbar</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  width</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-scrollbar-width</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  height</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-scrollbar-width</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">::</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">-webkit-scrollbar-track</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  background</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-scrollbar-track</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">::</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">-webkit-scrollbar-thumb</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  background</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-scrollbar-color</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  border-radius</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-scrollbar-radius</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  transition</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EA9A97;--shiki-dark:#EA9A97;"> 0.2</span><span style="--shiki-light:#3E8FB0;--shiki-dark:#3E8FB0;">s</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">;</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">::</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">-webkit-scrollbar-thumb</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">:</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">hover</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;"> {</span></span>
<span class="line"><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">  background</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">:</span><span style="--shiki-light:#EB6F92;--shiki-dark:#EB6F92;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> var</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">(</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">--fei-scrollbar-color-hover</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">);</span></span>
<span class="line"><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">}</span></span></code></pre></div><!--]--></div><!----><!----></div></div></div></div><footer class="page-edit"><div class="last-updated"><span class="prefix">最后更新: </span><span class="time">2024-01-28 22:48:31</span></div></footer><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/introduction"><span>introduction</span><i class="bx bx-chevron-right"></i></a></span></p></div><!--[--><!--]--><div class="up"><i class="bx bx-chevron-up"></i></div><footer class="footer" data-v-36e8006f><div class="footer__uls" data-v-36e8006f><!--[--><ul data-v-36e8006f><li class="title" data-v-36e8006f>FEI-UI-DESIGN</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>介绍</a></li><li data-v-36e8006f><a target="_blank" href="/guide/installation" data-v-36e8006f>快速上手</a></li><li data-v-36e8006f><a target="_blank" href="/guide/jsx" data-v-36e8006f>指南</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>资源</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>文档</a></li><li data-v-36e8006f><a target="_blank" href="/components/button" data-v-36e8006f>组件</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>帮助</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues" data-v-36e8006f>Github Issues</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design/issues" data-v-36e8006f>Gitee Issues</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>社区</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/" data-v-36e8006f>Github</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design" data-v-36e8006f>Gitee</a></li><!--]--></ul><!--]--></div><div class="copy" data-v-36e8006f><span class="span-copy" data-v-36e8006f> Copyright © 2023 FEI-UI-DESIGN </span><span class="span-lusaxweb" data-v-36e8006f><span data-v-36e8006f> Created By </span><a target="_blank" href="http://lusaxweb.net" data-v-36e8006f>后来@</a></span></div></footer></main><aside class="sidebar" data-v-818e4420><svg class="effect1" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)"></path></svg><div class="content-sidebar"><!--[--><!--]--><ul class="sidebar-links"><!--[--><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>介绍</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/guide/introduction" title class="sidebar-link"><!----> Fei UI Design <!----></a></li><li class=""><a href="/fei-ui-design/guide/changelog" title class="sidebar-link"><!----> 变更日志 <!----></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>快速上手</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/guide/installation" title class="sidebar-link"><!----> 安装 <!----></a></li><li class=""><a href="/fei-ui-design/guide/usage-sfc" title class="sidebar-link"><!----> 在 SFC 中使用 <!----></a></li><li class=""><a href="/fei-ui-design/guide/import-on-demand" title class="sidebar-link"><!----> 按需引入 <!----></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>指南</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/guide/jsx" title class="sidebar-link"><!----> JSX &amp; TSX <!----></a></li><li class=""><a href="/fei-ui-design/guide/color-design" title class="sidebar-link"><!----> 色彩设计 <!----></a></li><li class=""><a href="/fei-ui-design/guide/custom-theme" title class="sidebar-link"><!----> 调整主题 <!----></a></li><li class="active"><a href="/fei-ui-design/guide/common-css" title class="sidebar-link active"><!----> 通用样式 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-api" title class="sidebar-link"><!----> 帮助函数 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-directive" title class="sidebar-link"><!----> 组件指令 <!----></a></li><li class=""><a href="/fei-ui-design/guide/common-transition" title class="sidebar-link"><!----> 内置动画 <!----></a></li><!--]--></ul></section></li><!--]--></ul><!--[--><!--]--></div></aside><!----></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_breadcrumb.md\":\"Bg1uZ2l2\",\"components_card.md\":\"5vBOail9\",\"components_back-top.md\":\"NOXjEB41\",\"components_desc.md\":\"NNy8sdZB\",\"components_affix.md\":\"q2WWgWAm\",\"components_alert.md\":\"EzvdKauv\",\"components_empty.md\":\"Iqk9Sbur\",\"components_notice.md\":\"_NAs6-A7\",\"components_calendar.md\":\"JigwWurO\",\"components_message-box.md\":\"fCCAsymk\",\"components_rate.md\":\"9KkdoNnr\",\"components_loading-bar.md\":\"tkY5C0GZ\",\"components_divider.md\":\"IS1ZOnvq\",\"components_collapse.md\":\"0u5rpv51\",\"components_layout.md\":\"ODBV3zhY\",\"components_drawer.md\":\"CrRyiXyC\",\"components_anchor.md\":\"s14wXJS8\",\"components_scrollbar.md\":\"6vQ32Hdn\",\"components_popover.md\":\"wYQmpkgs\",\"components_message.md\":\"NO65C7hX\",\"components_circle.md\":\"ryx4IdBG\",\"components_popper.md\":\"5Fyiy38Q\",\"components_badge.md\":\"oO7JxteH\",\"components_page.md\":\"kNgnJY-a\",\"components_count-to.md\":\"eHOBDHvp\",\"guide_custom-theme.md\":\"n1FWcWco\",\"guide_common-directive.md\":\"nT9B4UFj\",\"components_slider.md\":\"DI2RI7Rr\",\"components_progress.md\":\"eFjRj96_\",\"components_checkbox.md\":\"7F5dha0P\",\"guide_changelog.md\":\"0yWmpxcB\",\"guide_jsx.md\":\"8hwr5r-5\",\"components_split.md\":\"wUEP-Ht5\",\"components_icon.md\":\"dZIqeyJA\",\"guide_common-transition.md\":\"MscjPGVR\",\"guide_installation.md\":\"j6S0f9nJ\",\"components_switch.md\":\"vcak84L_\",\"components_config-provider.md\":\"nBaHjQiX\",\"components_carousel.md\":\"NtUqJ85A\",\"components_select.md\":\"0rxZmlt4\",\"index.md\":\"soxSuBHK\",\"guide_introduction.md\":\"2mVny5Oj\",\"components_upload.md\":\"U3QoNCTf\",\"guide_usage-sfc.md\":\"rW-UMWov\",\"components_dropdown.md\":\"51EVo7GJ\",\"components_button.md\":\"rxuz04JE\",\"components_modal.md\":\"4bWdPtB_\",\"components_skeleton.md\":\"v-GES9KU\",\"guide_color-design.md\":\"cVmivjOg\",\"guide_import-on-demand.md\":\"t0iAz-CI\",\"components_loading.md\":\"DGAeDdDQ\",\"components_input-number.md\":\"2tw-2fEx\",\"components_timeline.md\":\"Py8dhkSr\",\"components_space.md\":\"qly7dGS4\",\"components_steps.md\":\"Nje8YnTW\",\"components_time-picker.md\":\"zWM_dqXm\",\"components_radio.md\":\"Nt3d-szh\",\"components_grid.md\":\"h2dg77Kz\",\"components_color-picker.md\":\"vP55BNVo\",\"components_tooltip.md\":\"y5xaDDhE\",\"components_menu.md\":\"7c_ihj_r\",\"components_tag.md\":\"U2sf24zV\",\"components_input.md\":\"dJc4_w-S\",\"components_tabs.md\":\"aWS6wiSt\",\"components_date-picker.md\":\"9ogHh5Jw\",\"guide_common-css.md\":\"uhWWbi3e\",\"components_cascader.md\":\"Qiv-ax3R\",\"components_form.md\":\"oq_ykolk\",\"guide_common-api.md\":\"ctudm0v6\",\"components_tree.md\":\"LtXYhey_\",\"components_table.md\":\"ZqShECt8\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"FEI-UI-DESIGN\",\"description\":\"A VitePress site\",\"base\":\"/fei-ui-design/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/gumingWu/vitepress-fun\"}],\"repo\":\"ymf-930/fei-ui-design\",\"docsDir\":\"/docs\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"text\":\"组件\",\"link\":\"/fei-ui-design/components/button\"}],\"locales\":{\"/\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/fei-ui-design/\"},{\"text\":\"Document\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"Getting Started\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"Components\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/\":[{\"title\":\"介绍\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"快速上手\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"指南\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"通用组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"布局组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"数据录入组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"数据展示组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"导航组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"反馈组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"内置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"配置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}},\"/es/\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/fei-ui-design/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"快速开始\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"组件\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"组件\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/es/\":[{\"title\":\"Introduce\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"Get Started\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"Guide\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"Common Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"Layout Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"Data entry component\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"Data display Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"Navigation Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"Feedback Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"Built-in Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"Configure Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/es/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}}},\"lastUpdated\":true,\"lastUpdatedText\":\"最后更新\",\"linkPrevVersion\":\"https://lusaxweb.github.io/vuesax/\",\"searchPlaceholder\":\"Search\"},\"locales\":{\"/\":{\"lang\":\"zh-CN\",\"text\":\"中文\"},\"/es/\":{\"lang\":\"en-US\",\"text\":\"English\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>